<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover" class="mgb20" style="">
          <el-table :data="tableData" style="width: 100%;" border stripe
                    :default-sort="{prop: 'createTime', order: 'descending'}" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="expand" width="40">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="活动名称">
                    <span>{{ props.row.name }}</span>
                  </el-form-item>
                  <el-form-item label="所需人数">
                    <span>{{ props.row.peopleNum }}</span>
                  </el-form-item>
                  <el-form-item label="联系电话">
                    <span>{{ props.row.contactPhone }}</span>
                  </el-form-item>
                  <el-form-item label="服务类型">
                    <span>{{ props.row.serviceType }}</span>
                  </el-form-item>
                  <el-form-item label="服务开始时间">
                    <span>{{ props.row.serviceStart }}</span>
                  </el-form-item>
                  <el-form-item label="服务结束时间">
                    <span>{{ props.row.serviceEnd }}</span>
                  </el-form-item>
                  <el-form-item label="活动介绍">
                    <span>{{ props.row.introduce }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column v-for="(item, index) in column_array" :key="index" :prop="item.prop" :label="item.label"
                             width="250">
              <template slot-scope="scope">
                <!-- 使用计算属性来根据不同的值渲染不同的文字 -->
                <span v-if="item.prop === 'serviceState'">

                   <el-tag :type="statusTagType(scope.row.auditState)">
              {{ getServiceStateText(scope.row.auditState) }}
            </el-tag>
                </span>
                <!-- 其他列的渲染方式 -->
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="发布时间"
                sortable
                width="180">
            </el-table-column>
            <el-table-column align="right" width="200" fixed="right">
              <template slot="header" slot-scope="scope">
                <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入关键字搜索"/>
              </template>
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="success"
                    @click="handleState(scope.$index, scope.row)">审核通过
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleGoTo(scope.$index, scope.row)">驳回
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px">
            <el-button @click="printSelectedRows()">全部审核</el-button>

          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  queryAllActiveAdmin,
  auditActive
} from '../../../api/index'
import router from "@/router";

export default {
  props: [],
  watch: {},
  data() {
    return {
      name: "",
      tableData: [],
      column_array: [
        {
          prop: 'id',
          label: '活动ID'
        }, {
          prop: 'contactName',
          label: '联系人'
        }, {
          prop: 'contactPhone',
          label: '联系人号码'
        }, {
          prop: 'name',
          label: '活动名称'
        }, {
          prop: 'serviceType',
          label: '服务类型'
        }, {
          prop: 'address',
          label: '活动地址'
        }, {
          prop: 'serviceState',
          label: '审核状态'
        },
      ],
      search: '',
      selectedRows: []
    }
  },
  created() {
  },
  mounted() {
    this.getAllActivity()
  },
  methods: {
    statusTagType(status) {
      if (status === '0' ){
        return
      }
      return status === '1' ? 'success' : 'danger';
    },
    getServiceStateText(state) {
      switch (state) {
        case '0':
          return '未审核';
        case '1':
          return '审核通过';
        default:
          return '未知状态';
      }
    },
    getAllActivity() {
      queryAllActiveAdmin().then(res => {
        this.tableData = res.data
      })
    },
    handleGoTo(index, row) {
      console.log("index和row:", index, row)
    },
    handleState(index, row) {
      const data = {
        activeId: row.id,
        args: '1'
      };
      auditActive(data).then(res => {
        console.log("res:", res)
        this.getAllActivity()
        this.$message.success("审核完成")
      })
    },
    //一键审核按钮
    printSelectedRows() {
      this.selectedRows.forEach(row => {
        console.log(row); // 替换成您的打印逻辑
        this.handleState(0, row)
      });
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    }
  },
  components: {},
  beforeDestroy() {
  }

}
</script>

<style>
.demo-table-expand {
  font-size: 0;
  margin-left: 50px;
  width: 100%;
}

.demo-table-expand label {
  width: 100px;
  color: #000000;
}

.el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

</style>
